<template>
 <div class="icons">
      <swiper :options="swiperOption"  >
          <swiper-slide v-for="( page ,index) of pages " :key="index">
     <div class="icon" v-for="item of page" :key="item.id"> 
         <div class="icons-img">
         <img class="icons-img-conter"
          :src="item.imgUrl" />
         </div>
     <p class="icon-span">{{item.desc}}</p>
     </div>
          </swiper-slide>
      </swiper>
 </div>
</template> 
<script>
export default{
    name:'HomeIcons',
    props:{
        list:Array
    },
   data () {
       return {
         swiperOption:{
             autoplay:false
         }
       }
   },
   computed:{
      pages (){
          const pages =[]
          this.list.forEach((item,index) =>{
              const page=Math.floor(index/8)
              if(!pages[page]){
                  pages[page]=[]
              }
              pages[page].push(item)
          })
       return pages
      } 
   }

}
  
     
</script>
<style lang="stylus" scope>
@import '~styles/vieble.styl' 
@import '~styles/inmist.styl'   
.icons >>> .swiper-container
    height :0
    padding-bottom :50%
.icons
  margin-top :.1rem
  .icon  
     position: relative
     overflow: hidden
     float: left
     height: 0
     width :25%
     padding-bottom :25%
    .icons-img
      position :absolute
      top :0
      left :0
      right :0
      bottom :.44rem
      box-sizing :border-box
      padding :.1rem
     .icons-img-conter
             display :block
             margin :0 auto
             height :100% 
    .icon-span
         position :absolute
         left :0
         right :0
         bottom :0
         height :.44rem
         line-height :.44rem
         text-align : center
         color :$bccolor
         ellipest()
</style>